<?php
/**
 * @var \Mslynn\Live\Block\LivePageBlock $block
 *
 */
$lunbo=$block->getLunBo();
$video=$block->getVideo();
?>
<div class="live-top">
    <div class="topLogo">
        <a href="/">
            <img src="<?php echo $block->getLogo(); ?>">
        </a>
    </div>
    <div class="swiperText">
        <div class="swiper-container" id="swiper-container">
            <div class="swiper-wrapper">
                <?php if (!empty($lunbo)): ?>
                <?php foreach ($lunbo as $item ): ?>
                <div class="swiper-slide" ><?php echo $item['lunbo']; ?></div>
            <?php endforeach; endif?>
            </div>
        </div>
    </div>
</div>
<div class="videoBox">
    <div id="id_test_video">

        <?php if ($block->getliveenable()): ?>
            <!-- 直播人数 -->
            <div class="liveIngBox" style="display: block;">
                <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/liveIng.gif'); ?>">
                <span>
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/renshu.png'); ?>">
                    <span class="viewNumber"></span> View
                </span>
            </div>
        <?php endif ?>
        <!-- 剪辑视频 -->
        <div class="liveVideo" style="display: none">
            <!-- 播放键 -->
            <div class="startBox">
                <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/start.png'); ?>">
            </div>
            <video width="100%" height="100%" style="height: 672px" src=""
                   controlslist="nodownload noremoteplayback"></video>
        </div>
        <div class="playbackBox" style="display: none">
            <div class="swiper-container">
                <div class="swiper-wrapper" >
                    <?php if (!empty($video)): ?>
                    <?php foreach ($video as $k=>$item): ?>
                    <div class="swiper-slide video<?php echo  $k;?>">
                        <video src="<?php echo $item['video'] ?>" width="80%" height="auto">
                        </video>
                        <div class="startBox<?php echo $k ?>   startBox1">
                            <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/start.png'); ?>">
                        </div>
                    </div>
                    <?php endforeach;endif ?>


                </div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>

    </div>
    <div class="live-clearfix">
        <div class="thumbnail">
            <!-- 品牌故事 -->
            <div class="brandStory">
                    <span class="brand-story">
                        Brand Story
                    </span>
                <img src="<?php /*echo $block->getLogo();*/ ?>" class="brand-img">

            </div>
            <!-- 品牌简介 -->
            <div class="brandProfile">
                <p class="profile-text">
                    <?php echo $block->getBrandStoryDesc(); ?>
                </p>
                <div class="profile-more"><a href="/aboutus.html">more&gt;&gt;</a></div>
                <div class="allHair">All Natural Hair Styles For Every Taste.</div>
            </div>
            <div class="liveTime">
                <div class="soon-back">ANDY WILL BACK SOON</div>
                <div class="timeBox">
                    <div class="daysBox">
                            <span class="daysNum">
                                00
                            </span>
                        <br>
                        <span class="days">
                                days
                            </span>
                    </div>
                    <span class="division">:</span>
                    <div class="hoursBox">
                            <span class="hoursNum">
                                00
                            </span>
                        <br>
                        <span class="hours">
                                hours
                            </span>
                    </div>
                    <span class="division">:</span>
                    <div class="minutesBox">
                            <span class="minutesNum">
                                00
                            </span>
                        <br>
                        <span class="minutes">
                                minutes
                            </span>
                    </div>
                    <span class="division">:</span>
                    <div class="secondsBox">
                            <span class="secondsNum">
                                00
                            </span>
                        <br>
                        <span class="seconds">
                                seconds
                            </span>
                    </div>
                </div>
            </div>
            <div class="caption" id="dialog"></div>
        </div>
        <form class="subForm">
            <select style="margin-bottom:8px" id="client_list">
                <option value="all">所有人</option>
            </select>
            <div class="emojiBox">
                <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728523.png'); ?>" class="emojiBtn">
                <div class="emojiContent" style="display: none;">
                    <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/like.png'); ?>" alt="like" onclick="imgBtn(this)">
                    <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/RollOnesEyes.png'); ?>" alt="RollOnesEyes" onclick="imgBtn(this)">
                    <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/Happy.png'); ?>" alt="Happy" onclick="imgBtn(this)">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/love.png'); ?>" alt="love" onclick="imgBtn(this)">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/100.png'); ?>" alt="100" onclick="imgBtn(this)">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/Mask.png'); ?>" alt="Mask" onclick="imgBtn(this)">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/party.png'); ?>" alt="party" onclick="imgBtn(this)">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/Stars.png'); ?>" alt="Stars" onclick="imgBtn(this)">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/cry.png'); ?>" alt="cry" onclick="imgBtn(this)">
                </div>
            </div>
            <textarea placeholder="Ask a question for" class="textarea" id="textarea" maxlength="12000"></textarea>
            <div class="searchContact">
                <a href="https://www.facebook.com/share.php?u=<?php echo $this->getUrl("live") ?>"
                   target="_blank" rel="noopener" class="rounded social_facebook">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728533_1.gif'); ?>">
                </a>
                <a href="https://twitter.com/share?text=Studio&amp;url=<?php echo $this->getUrl("live") ?>"
                   target="_blank" rel="noopener">
                    <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728537.gif'); ?>">
                </a>
                <a href="https://pinterest.com/pin/create/bookmarklet/?url=<?php echo $this->getUrl("live") ?>"
                   target="_blank" rel="noopener">
                    <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728543.gif'); ?>">
                </a>
                <a href="https://www.instagram.com/mslynn_mall/" target="_blank" rel="noopener">
                    <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728548.png'); ?>">
                </a>
            </div>
            <div class="say-btn">
                <input type="button" id="send" class="subBtn" value="Send">
            </div>
        </form>
    </div>
</div>
<div class="recommendation">
    <!-- 产品列表 -->
    <div class="productItems">
        <!-- 列表标题 -->
        <div class="productItemsTitleBox">
            <span class="productItemsTitle"><b>All products</b></span>
            <span class="lis"></span>
        </div>
        <div class="productItem">
            <ul>

                <?php $i = 1;
                foreach ($block->getSkuProduct() as $k => $item): ?>

                    <li>
                        <div class="itemContent">
                            <!-- 索引项 -->
                            <div class="itemIndex"><span><?php echo $i++; ?></span></div>
                            <div class="itemImg">
                                <img src="<?php echo $item['image']; ?>">
                            </div>
                            <div class="itemRight">
                                <div class="itemTitleBox">
                                    <span class="itemHot">HOT</span>
                                    <span class="itemTitle"> <?php echo $item['name']; ?> </span>
                                </div>
                                <div class="itemPrice">
                                    <span class="nowPrice">$<?php echo number_format( $item['price'],2); ?></span>
                                    <span class="discountPrice">$<?php echo number_format($item['total_price'],2); ?></span>
                                </div>
                                <div class="itemBtnBox">
                                    <a href="<?php echo $item['url']; ?>">
                                        <input type="button" value="EXPLORE MORE" class="itemBtn">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

    </div>
    <!-- 活动区域 -->
    <div class="activitiesBox">
        <div class="activitiesTitle">
            <span class="activities">Activities</span>
        </div>
        <div class="activitiesImg">
            <img src="<?php echo $block->getActivitesLogo(); ?>" class="brand-img">
        </div>
        <div class="customerService">
            <div class="afterSale">After-Sale Service</div>
            <div class="contact"><?php echo $block->getContact(); ?></div>
        </div>
        <div class="contactUs">
            <div class="contactIphone">
                <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728561.gif'); ?>">
                :<?php echo $block->getPhone() ?>
            </div>
            <div class="contactEmail">
                <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/1588728564.gif'); ?>">
                : <?php echo $block->getEmail() ?>
            </div>
        </div>
    </div>
</div>
<?php if ($block->getliveenable()): ?>
    <script>
        require(['hls'], function (hls) {
            window.Hls = hls
            console.log(hls)
            require(['aliplayer'], function (aliplayer) {
                var player = new Aliplayer({
                    id: 'id_test_video',
                    width: '846px',
                    height: '696px',
                    videoWidth: '100%',
                    autoplay: true,
                    language: "en-us",
                    //支持播放地址播放,此播放优先级最高
                    //       source : 'https://db.onesmile.club/fc287ddfvodcq1251162920/c714b5495285890805331126657/ng97vJfztRoA.mp4',
                    skinLayout: [
                        {
                            "name": "bigPlayButton",
                            "align": "blabs",
                            "x": 30,
                            "y": 80
                        },
                        {
                            "name": "H5Loading",
                            "align": "cc"
                        },
                        {
                            "name": "errorDisplay",
                            "align": "tlabs",
                            "x": 0,
                            "y": 0
                        },
                        {
                            "name": "infoDisplay"
                        },
                        {
                            "name": "tooltip",
                            "align": "blabs",
                            "x": 0,
                            "y": 56
                        },
                        {
                            "name": "thumbnail"
                        },
                        {
                            "name": "controlBar",
                            "align": "blabs",
                            "x": 0,
                            "y": 0,
                            "children": [
                                {
                                    "name": "progress",
                                    "align": "blabs",
                                    "x": 0,
                                    "y": 44
                                },
                                {
                                    "name": "playButton",
                                    "align": "tl",
                                    "x": 15,
                                    "y": 12
                                },
                                {
                                    "name": "timeDisplay",
                                    "align": "tl",
                                    "x": 10,
                                    "y": 7
                                },
                                {
                                    "name": "fullScreenButton",
                                    "align": "tr",
                                    "x": 10,
                                    "y": 12
                                },
                                {
                                    "name": "volume",
                                    "align": "tr",
                                    "x": 5,
                                    "y": 10
                                }
                            ]
                        }
                    ],

                    <?php if($block->getliveenable()){?>
                    isLive: true,
                    <?php } ?>
                    source: '<?php  echo $block->getLiveUrl();?>',

                }, function (player) {
                    player.play()
                    //   player.liveShiftSerivce.setLiveTimeRange('','2020/11/05 13:00:00')
                    console.log('播放器创建好了。')
                })
                player.on('canplay', function (e) {
                    console.log('canplay')
                    //    player.liveShiftSerivce.setLiveTimeRange('','2020/11/05 13:00:00')
                    //    player.play()
                });
                player.on('error', function () {
                    console.log('错误事件')
                    //   player.liveShiftSerivce.setLiveTimeRange('','2020/11/05 13:00:00')

                    var newUrl = "";
                    player.loadByUrl(newUrl);
                });
                console.log(player)
            })
        })
    </script>
<?php endif; ?>
<?php if (!$block->getliveenable()): ?>
    <script>
        require(['jquery'], function ($) {
            // 剪辑视频
            $('.liveVideo').show();
            $('.playbackBox').show();
            $('.vcp-player').hide();
            $('.liveVideo video').attr({
                'src': '<?php echo $block->getVideo1();?>',
                'controls': true
            })
            // 去除video控件三个点
            $('.liveVideo video')[0]['disablePictureInPicture'] = true
            // 点击播放键播放视频
            $('.startBox').click(function () {
                // 自动播放
                $('.liveVideo video')[0].play();
                // 显示视频控件
                $('.liveVideo video').attr('controls', true);
                // 播放键隐藏
                $('.playbackBox').hide();
                // 轮播图隐藏
                $('.startBox').hide();
            })
                 <?php if (!empty($video)): ?>
                    <?php foreach ($video as $k=>$item): ?>
            // 点击第一个视频隐藏其他视频
            $('.startBox<?php echo $k;?>').click(function () {
                // 播放键隐藏
                $('.startBox').hide()
                // 最大屏展示
                var video<?php echo $k;?> = $('.video1 video').attr('src')
                $('.liveVideo video').attr({
                    'src': video<?php echo $k;?>,
                    'controls': true
                })
                // 自动播放
                $('.liveVideo video')[0].play();
                // 轮播图隐藏
                $('.playbackBox').hide();
            })
            <?php endforeach;endif?>

        })

    </script>
<?php endif ?>

<script>

     require(["jquery",'swiper'],function($,Swiper) {
         var swiperText = new Swiper('.swiperText .swiper-container', {
             direction: 'vertical',
             loop: true,
             autoplay:{
               delay:1000

             },

             slidesPerView: 1,
             observer: true,
             observeParents: true,
         })
     })
</script>
<!-- 回放轮播 -->
<script>
    require(["jquery", 'swiper'], function ($, Swiper) {
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            slidesPerView: 2,
            observer: true,
            observeParents: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })
    })
</script>

<script>
    require(['jquery', 'socket'], function ($, io) {
        var username = 'mslynnhair';
      var socket = io.connect('<?php echo $block->getSocket() ?>');
        console.log(323231)


        $(".emojiBtn").click(function () {
            $('.emojiContent').toggle()
        })

        $(document).keyup(function (e) {
            var key = e.which;
            if (key == 13) {
                var input = document.getElementById("textarea");

                socket.emit('sendMsg', {
                    msg: input.value,
                    color: 'red',
                    type: 'text'
                });
                input.value = ""

                return false;
            }
        });
        $('#send').click(function (e) {
            var input = document.getElementById("textarea");

            socket.emit('sendMsg', {
                msg: input.value,
                color: 'red',
                type: 'text'
            });
            input.value = ""

            return false;
        });
        socket.emit('login', {
            name: username,
        })
        // 登录成功，隐藏登录层
        socket.on('loginSuc', (data) => {
            console.log('登录成功')
            username = data.name

        })
        socket.on('loginError', () => {
            console.log('用户名已存在，请重新输入！')
        });
        // 接收消息
        socket.on('receiveMsg', (obj) => {
            console.log(obj)
            say(obj.name, obj.msg, obj.time)
        })


        // 发言
        function say(from_client_name, content, time, this_clinet_id = '1') {

            var face = {
                '[like]': '<img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/like.png'); ?>" alt="" class="emojiCon"/>',
                '[100]': '<img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/100.png'); ?>" alt="" class="emojiCon"/>',
                '[cry]': '<img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/cry.png'); ?>" alt="" class="emojiCon"/>',
                '[Happy]': '<img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/Happy.png'); ?>" alt="" class="emojiCon"/>',
                '[love]': '<img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/love.png'); ?>" alt="" class="emojiCon"/>',
                '[Mask]': '<img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/Mask.png'); ?>" alt="" class="emojiCon"/>',
                '[party]': '<img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/party.png'); ?>" alt="" class="emojiCon"/>',
                '[RollOnesEyes]': '<img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/RollOnesEyes.png'); ?>" alt="" class="emojiCon"/>',
                '[Stars]': '<img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/Stars.png'); ?>" alt="" class="emojiCon"/>'
            } //完整的qq表情见本文末尾
            var reg = /\[.+?\]/g;

            content = content.replace(reg, function (a) {
                return face[a];
            });

            //解析url
         /*   content = content.replace(/(http|https):\/\/[\S]+/gi, function (url) {
                if (url.indexOf(".sinaimg.cn/") < 0)
                    return "<a target='_blank' href='" + url + "'>" + url + "</a>";
                else
                    return url;
            });*/
            // 随机头像
            // var r= parseInt(Math.random()*(25-1)+1);


            if (username == from_client_name) {

                $("#dialog").append('<div class="speech_itemMy"><img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/tx3.jpg'); ?>" class="user_icon" /> ' + '<span>' + from_client_name + '</span>' + ' <br> ' + '<span>' + time + '</span>' + '<div style="clear:both;"></div><p class="triangle-isosceles top">' + content + '</p> </div>');
            } else {
                $("#dialog").append('<div class="speech_item"><img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/tx2.jpg'); ?>" class="user_icon" /> ' + from_client_name + ' <br> ' + time + '<div style="clear:both;"></div><p class="triangle-isosceles top">' + content + '</p> </div>');
            }

            $("#dialog").scrollTop($("#dialog")[0].scrollHeight);
        }


        // 系统提示消息
        socket.on('system', (user) => {

            console.log('system', user)

            say(user.name, user.name + '<span style="color:red">joined the studio<span>', user.time)
        });
        // 显示在线人员
        socket.on('disUser', (usersInfo) => {
            console.log('disUser', usersInfo)
            $(".viewNumber").html(usersInfo.length)
        });

        // 点击除自身隐藏
        $("body").click(function (e) {
            if (!$(e.target).closest(".emojiBtn").length) {
                $(".emojiContent").hide();
            }
        });
    })


</script>


<script type="text/javascript">

    function imgBtn(e) {
        // 获取img标签的alt属性值
        var alt = e.getAttribute('alt')
        // 获取textarea输入框
        var input = document.getElementById("textarea");
        // 向输入框添加alt
        input.value += '[' + alt + ']'
    }

</script>